<!doctype html>
<html lang="en" class="dark font-sans antialiased">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="/component.css" rel="stylesheet" />
    <script src="/component.js" defer></script>
  </head>
  <body class="mx-auto max-w-lg p-6">
    <fieldset>
      <legend class="sr-only">Checkboxes</legend>

      <div class="flex flex-col items-start gap-3">
        <label for="Option1" class="inline-flex items-center gap-3">
          <input type="checkbox" class="size-5 rounded border-gray-300 shadow-sm" id="Option1" />

          <span class="font-medium text-gray-700"> Option 1 </span>
        </label>

        <label for="Option2" class="inline-flex items-center gap-3">
          <input type="checkbox" class="size-5 rounded border-gray-300 shadow-sm" id="Option2" />

          <span class="font-medium text-gray-700"> Option 2 </span>
        </label>

        <label for="Option3" class="inline-flex items-center gap-3">
          <input type="checkbox" class="size-5 rounded border-gray-300 shadow-sm" id="Option3" />

          <span class="font-medium text-gray-700"> Option 3 </span>
        </label>
      </div>
    </fieldset>
  </body>
</html>
